Make the sidebar's horizontal padding symmetric

Widgets should be horizontally centered in the sidebar. Else they look
out of place (in particular the clock and the applications widgets).
Due to little tricks with the sidebar starting out of the screen to
hide rounded corners, this implies playing with paddings. The patch
decreases the widgets padding from 4 to 2 pixels, removes additionnal
padding on the right, and adds an out-of-screen padding to the widget
box to make up for the negative horizontal position of the sidebar.

diff --git a/js/ui/sidebar.js b/js/ui/sidebar.js
index 0afd8d8db55b4e0ab5f3649d44f14a7d9c5dd3f4..e85cad079a0e8459db300ae06632f94fd05c0b34 100644 (file)
--- a/js/ui/sidebar.js
+++ b/js/ui/sidebar.js
@@ -14,10 +14,12 @@ const WidgetBox = imports.ui.widgetBox;
 const SIDEBAR_SPACING = 4;
 const SIDEBAR_PADDING = 4;
 
-// The total sidebar width is the widget width plus the widget
-// padding, plus the sidebar padding
-const SIDEBAR_COLLAPSED_WIDTH = Widget.COLLAPSED_WIDTH + 2 * WidgetBox.WIDGETBOX_PADDING + 2 * SIDEBAR_PADDING;
-const SIDEBAR_EXPANDED_WIDTH = Widget.EXPANDED_WIDTH + 2 * WidgetBox.WIDGETBOX_PADDING + 2 * SIDEBAR_PADDING;
+// The total sidebar width is the widget width plus the widget padding
+// (counted twice for the widget box, and once again for the
+// out-of-screen padding), plus the empty space between the border of
+// the bar and of the windows
+const SIDEBAR_COLLAPSED_WIDTH = Widget.COLLAPSED_WIDTH + 3 * WidgetBox.WIDGETBOX_PADDING + SIDEBAR_PADDING;
+const SIDEBAR_EXPANDED_WIDTH = Widget.EXPANDED_WIDTH + 3 * WidgetBox.WIDGETBOX_PADDING + SIDEBAR_PADDING;
 
 // The maximum height of the sidebar would be extending from just
 // below the panel to just above the taskbar. Since the taskbar is
@@ -58,7 +60,7 @@ Sidebar.prototype = {
         // during the animation.
         this.box = new Big.Box ({ padding_top: SIDEBAR_PADDING,
                                   padding_bottom: SIDEBAR_PADDING,
-                                  padding_right: SIDEBAR_PADDING,
+                                  padding_right: 0,
                                   padding_left: 0,
                                   spacing: SIDEBAR_SPACING });
         this.actor.add_actor(this.box);

diff --git a/js/ui/widgetBox.js b/js/ui/widgetBox.js
index 78baf86b485bf9394a8a5c9e99fcab20b31b43b6..50e16d5998d4c38cfbbbc3ee172b847f7bfac115 100644 (file)
--- a/js/ui/widgetBox.js
+++ b/js/ui/widgetBox.js
@@ -15,7 +15,7 @@ WIDGETBOX_BG_COLOR.from_pixel(0xf0f0f0ff);
 const BLACK = new Clutter.Color();
 BLACK.from_pixel(0x000000ff);
 
-const WIDGETBOX_PADDING = 4;
+const WIDGETBOX_PADDING = 2;
 const ANIMATION_TIME = 0.5;
 const POP_IN_LAG = 250; /* milliseconds */
 
@@ -77,9 +77,15 @@ WidgetBox.prototype = {
 
         this.actor = new Clutter.Group();
         this._hbox = new Big.Box({ background_color: WIDGETBOX_BG_COLOR,
-                                   padding: WIDGETBOX_PADDING,
+                                   padding_top: WIDGETBOX_PADDING,
+                                   padding_bottom: WIDGETBOX_PADDING,
+                                   padding_right: WIDGETBOX_PADDING,
+                                   // Left padding is here to make up for
+                                   // the X offset used for the sidebar
+                                   // to hide its rounded corners
+                                   padding_left: 2 * WIDGETBOX_PADDING,
                                    spacing: WIDGETBOX_PADDING,
-                                   corner_radius: WIDGETBOX_PADDING / 2,
+                                   corner_radius: WIDGETBOX_PADDING,
                                    orientation: Big.BoxOrientation.HORIZONTAL,
                                    reactive: true });
         this.actor.add_actor(this._hbox);